<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Studio</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/jquery_dropdown_menu.css" rel="stylesheet" type="text/css" />
<link href="./css/nivo-slider.css" rel="stylesheet" type="text/css" />

<script src="./javascript/jquery.js" type="text/javascript"></script>
<script src="./javascript/custom.js" type="text/javascript"></script>

<!-- Newsletter validation JavaScript Files -->
<script src="./javascript/jquery.formvalidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#newsletter").validate();
});
</script>

<!-- Cufon JavaScript Files -->
<script src="./javascript/cufon-yui.js" type="text/javascript"></script>
<script src="./javascript/kabel-font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h4, .quote')
</script>

<script src="./javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
        $(window).load(function() {
	        $('#slider').nivoSlider({
		        effect:'random',
		        slices:25,
		        animSpeed:1000,
		        pauseTime:4000,
		        directionNav:true, //Next and Prev
		        directionNavHide:true, //Only show on hover
		        controlNav:true
	        });
            $('.nivo-controlNav').css({width:islides});
        });

</script>

<!-- Scroll JavaScript Files -->
<script src="./javascript/scroll.js" type="text/javascript"> </script>
<script type="text/javascript"> 
  $(document).ready(function(){ 
    $.localScroll(); 
  }); 
</script>

<meta charset="UTF-8"></head>

<body>

<div id="wrapper">

	<div id="header">
	
		<div class="logo"><a href="#"><img src="./images/logo.png" alt="logo" /></a></div>
	
			<div id="myslidemenu" class="jqueryslidemenu">
				<ul>
					<li><a href="./index.html" class="current">Home</a>
						<ul>			 
							<li><a href="./index.html">Slideshow</a></li>
							<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
							<li><a href="./index3.html">Anything Slider</a></li>
						</ul><!--END ul home-->
					</li>
					
					<li><a href="./about.html">About</a></li>
					
					<li><a href="#">Features</a>
						<ul>
							<li><a href="#">Index page &raquo;</a>
								<ul>
									<li><a href="./index.html">Slideshow - Fading</a></li>
									<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
								</ul><!--END ul index page-->
							</li>
							<li><a href="./about.html">About page</a></li>			
							<li><a href="./services.html">Services page</a></li>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
							<li><a href="./blog.html">Blog page</a></li>
							<li><a href="./blog-single.html">Blog single page</a></li>
							<li><a href="./contact.html">Contact page</a></li>
						</ul><!--END ul features-->
					</li>
						
					<li><a href="./elements.html">Style</a>
						<ul>
							<li><a href="./elements.html">Elements page</a></li>			
							<li><a href="./full-width-page.html">Full width page</a></li>															
							<li><a href="#">Template's colors &raquo;</a>
								<ul>
									<li><a href="http://brankic1979.com/theme/Thestudio/dark/">Dark</a></li>
									<li><a href="./index.html">Grey</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/blue/">Blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/aquamarine/">Deep blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/red/">Red</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/green/">Green</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/yellow/">Yellow</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/orange/">Orange</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/magenta/">Magenta</a></li>
								</ul><!--END ul template's colors-->
							</li>						
							<li><a href="#">Header &raquo;</a>
								<ul>
									<li><a href="./index.html">Twitter update</a></li>
									<li><a href="./blog-single.html">Breadcrumb pagination</a></li>
								</ul><!--END ul header-->
							</li>							
							<li><a href="#">Footer &raquo;</a>
								<ul>
									<li><a href="./about.html#footer">Style 1</a></li>
									<li><a href="./contact.html#footer">Style 2</a></li>
								</ul><!--END ul footer-->
							</li>
						</ul><!--END ul style-->
					</li>	
					
					<li><a href="./services.html">Services</a></li>
					
					<li><a href="./portfolio.html">Portfolio</a>	
						<ul>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
						</ul><!--END ul portfolio-->						
					</li>
					
					<li><a href="./blog.html">Blog</a></li>
					
					<li><a href="./contact.html">Contact</a></li>
				</ul><!--END ul-->
			</div><!--END jqueryslidemenu-->
		
	</div><!--END header-->
		
	<div id="slideshow-holder">
		
		<div id="sliderwrap">
		
            <div id="slider">

                <a href="#"><img src="./images/slide1.jpg" alt="" title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna." /></a>
				
                <img src="./images/slide2.jpg" alt="" title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna." />
				
				<img src="./images/slide3.jpg" alt="" title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna." />
                
                <img src="./images/slide4.jpg" alt="" title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna." />				
		</div>
		
	</div><!-- Slider End -->
	
</div>
	
	<div id="center_holder">
	<div class="twitter">Not sure why I'm still awake at 1AM. Might be due to the fact I'm receiving new emails every 2-5 minutes. <a href="#">about 21 hours ago</a>	
	<a href="#" class="follow-me toolTip"  title="Follow me on Twitter.">follow me</a>
	</div><!--END twitter-->
	</div><!--END twitter holder-->	
	
	<div id="content">
	
		<div class="headlines">
			<ul>
				<li>
					<span class="date">January 7, 2010</span>   
					<a href="#">Lorem ipsum dolor sit amet</a>
					<span class="cat">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</span> 
				</li>
				
				<li>
					<span class="date">January 29, 2010</span>   
					<a href="#">At vero eos et accusamus et iusto</a>
					<span class="cat">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis top praesentium voluptatum delen atque corrupti quos...</span> 
				</li>
				
				<li>
					<span class="date">February 25, 2010</span>   
					<a href="#">Cras lobortis mauris vel diam</a>
					<span class="cat">Cras lobortis mauris vel diam malesuada mattis aliquam urna imperdiet...</span> 
				</li>
				
				<li>
					<span class="date">March 17, 2010</span>   
					<a href="#">Duis aute irure dolor in reprehenderit</a>
					<span class="cat">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...</span> 
				</li>
			</ul><!--END ul-->
		</div><!--END headlines-->
	
		<div class="box">		
			<a href="./services.html" class="read-more"><img src="./images/page-curl.png" alt="" /></a>
		
				<ul id="tabMenu">
				<li class="selected">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				</ul><!--END tabMenu-->
				
					<div class="boxBody">
					  
					<div class="show"><img src="./images/glider1.png" alt="" />
					<h1>Web design and development</h1>
					<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Et harum quidem rerum facilis est et expedita in distinctmolest excepturi sint occaecati lobortis for Cras lobortis mauris vel diam malesuada mattis aliquam urna imperdiet. Nullam tempor velit sit amet libero are aretra dignissim. Suspendisse suscipit, dui et mattis fringilla erat dolor.</span>  	
					</div> <!--END step1--> 
					  
					<div><img src="./images/glider3.png" alt="" />
					<h1>Print design</h1>
					<span class="desc">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis top praesentium voluptatum delen atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa tofficia deserunt mollitia animi, id est laborum et are dolorum fuga. Et harum quidem rerum facilis est et expedita in distinctmolest excepturi sint occaecati lobortis. Similique sunt culpa tofficia deserunt mollitia animi, id est laborum et are dolorum fuga.</span>    
					</div><!--END step2-->
					
						  
					<div><img src="./images/glider2.png" alt="" />
					<h1>Logo design and branding</h1>
					<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Cras lobortis mauris vel diam malesuada mattis aliquam urna imperdiet. Nullam tempor velit sit amet libero are aretra dignissim. Suspendisse suscipit, dui et mattis fringilla erat dolor Class aptent taciti sociosqu ad litora torquent per conubiaa, per inceptos himenaeos.</span>	
					</div><!--END step3-->
						
					<div><img src="./images/glider4.png" alt="" />
					<h1>SEO optimization</h1>
					<span class="desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, architecto beatae vitae dicta sunt explicabo. Similique sunt culpa tofficia deserunt mollitia animi, id est laborum et are dolorum fuga. Similique sunt culpa tofficia deserunt mollitia animi, id est laborum et are dolorum fuga.</span>   
					</div><!--END step4-->
						
					<div><img src="./images/glider5.png" alt="" />
					<h1>Email marketing</h1>
					<span class="desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. </span>    
					</div><!--END step5-->
					</div><!-- END boxBody-->
			
	  </div><!--END box-->
	
</div><!--END content-->

<div id="footer">
	<div class="bottom">
	
		<div>
		<h4>Latest posts</h4>		<ul class="posts">
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>7, 2010</p>
			<a href="#">Lorem ipsum dolor sit amet</a>
			</div>	
			</li>
				
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>29, 2010</p>
			<a href="#">At vero eos et accusamus et iusto</a>
			</div>	
			</li>
				
			<li>
			<h1>Feb</h1>
			<div class="listing">
			<p>25, 2010</p>
			<a href="#">Cras lobortis mauris vel diam</a>
			</div>	
			</li>
				
			<li>
			<h1>Mar</h1>
			<div class="listing">
			<p>17, 2010</p>
			<a href="#">Duis aute irure dolor in reprehenderit</a>
			</div>	
			</li>
			</ul><!--END posts-->
		</div><!--END left-->
		
	
		<div>
		<h4>About us </h4>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab <a href="#">illo inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<br /><br />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
		</div><!--END div-->
	
		
		<div>    	
		<h4>Newsletter</h4>
		<p>Our newsletter is awesome. Subscribe and get the latest updates. Spam free..</p>
		
			<form id="newsletter" name="newsletter" action="#" method="post">
				<input type="text" id="newsletter1" onfocus="if (this.value == 'Enter your name') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your name'; }" value="Enter your name" />
				<input type="text" id="newsletter2" onfocus="if (this.value == 'Enter your email') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your email'; }" value="Enter your email" class="required email" />
				<input name="Submit" type="submit" class="submit" value="Submit" />
			</form> 
			<!--END newsletter-->
		
			<ul class="socialize"> 
				<li class="toolTip" title="Flickr"><a href="#"><img src="./images/social-icon1.png" alt="1" /></a></li>
				<li class="toolTip" title="Reddit"><a href="#"><img src="./images/social-icon2.png" alt="2" /></a></li>
				<li class="toolTip" title="Wordpress"><a href="#"><img src="./images/social-icon3.png" alt="3" /></a></li>
				<li class="toolTip" title="Facebook"><a href="#"><img src="./images/social-icon4.png" alt="4" /></a></li>
				<li class="toolTip" title="Stumbleupon"><a href="#"><img src="./images/social-icon5.png" alt="5" /></a></li>
			</ul><!--END socialize ul-->  
				  
		</div><!--END div-->		
	</div><!--END bottom-->
</div><!--END bottom-box-->
  
<div class="footer">
	<div class="copyright">
		<ul>
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.html">About</a></li>
			<li><a href="./services.html">Services</a></li>
			<li><a href="./elements.html">Features</a></li>
			<li><a href="./portfolio.html">Portfolio</a></li>
			<li><a href="./blog.html">Blog</a></li>
			<li><a href="./contact.html">Contact</a></li>
		</ul>
	<p>© Copyright 2010 Your web site name. All rights reserved.</p>			
	</div><!--END copyright-->
	
</div><!--END footer-->    
  
</div><!--END wrapper--> 

<!-- Tooltip JavaScript File -->
<script type="text/javascript" src="./javascript/tooltip.js"></script> 
</body>
</html>
